<!--
 * @Date: 2024-12-19 14:27:51
 * @Author: LiSong
 * @LastEditors: ZHM
 * @LastEditTime: 2025-03-17 09:58:54
 * @Description: 系列配置的弹窗
-->
<template>
  <HpDialog v-model="dialogState.visible"
    ref="dialogRef"
    top="15vh"
    :title="title"
    width="70%"
    height="60%"
    class="iput-series-dialog"
    :appendToBody="false"
    @close="handleCancel"
    @confirm="handleConfirm">
    <div class="series-dialog-body">
      <RkTable ref="tableRef"
        :="tableAttrs"
        :columns="tableColumns">
        <template #toolbar_left>
          <el-button type="primary"
            @click="addTableRow">添加</el-button>
          <el-button type="danger"
            @click="delTableRow">删除</el-button>
        </template>
        <template #toolbar_right>
        </template>
        <template #input="{ row, column }">
          <HpInput v-model="row[column.field]"
            placeholder="请输入" />
        </template>
        <template #input_icon="{ row, column }">
          <HpInputIcon v-model="row[column.field]" />
        </template>
        <template #input_color="{ row, column }">
          <HpInputColor v-model="row[column.field]" />
        </template>
        <template #select="{ row, column }">
          <HpSelect v-model="row[column.field]"
            :options="column.params.options" />
        </template>
        <template #select_filed="{ row, column }">
          <HpSelect v-model="row[column.field]"
            :options="fieldOptions" />
        </template>
        <template #select_routes="{ row, column }">
          <HpSelectRoutes clearable
            filterable
            v-model="row[column.field]" />
        </template>
        <template #parameter="{ row }">
          <el-button link
            type="primary"
            icon="Edit"
            @click.stop="handleParameter(row)" />
        </template>
      </RkTable>
    </div>
    <!-- 弹窗区域 -->
    <ParameterDialog ref="parameterDialogRef"
      @confirm="parameterConfirm" />
  </HpDialog>
</template>

<script setup>
import { reactive, computed, ref } from 'vue';
import RkTable from '@/components/rk-table';
import HpDialog from '@hp/comps/dialog/src/HpDialog.vue'

import { getUUID } from '@hp/utils/data.js'
import { useDbSource } from '@hp/hooks/useDbSource.js'
import { pluginManager } from '@hp/utils/pluginManager.js'
import ParameterDialog from './ParameterDialog.vue'

const HpInput = pluginManager.attrEditors['input']
const HpInputIcon = pluginManager.attrEditors['input-icon']
const HpInputColor = pluginManager.attrEditors['input-color']

const HpSelect = pluginManager.attrEditors['select']
const HpSelectRoutes = pluginManager.attrEditors['select-routes']

const { loadDataChildCols } = useDbSource()

const props = defineProps({
  // 弹窗名称
  title: { type: String, default: '状态项配置' },
  // 父节点数据
  pData: { type: Object },
  // 数据集
  schema: { type: Object },
  // 结构配置
  config: { type: Object },
  // 是否可见
  visible: { type: Boolean, default: false },
  // 数据集
  modelState: { type: Object },
  // 取消方法
  onCancel: { type: Function },
  // 确认方法
  onConfirm: { type: Function },
  // 销毁方法
  onDestory: { type: Function },
})

// 弹窗的Ref
const dialogRef = ref(null)
// 弹窗数据集
const dialogState = reactive({
  visible: props.visible
})
const handleCancel = () => {
  if (props.onCancel) { props.onCancel() }
  handleDestory()
}
const handleConfirm = () => {
  const { tableData } = tableRef.value.getTableData()
  if (props.onConfirm) { props.onConfirm(JSON.parse(JSON.stringify(tableData))) }
  handleDestory()
}
const handleDestory = () => {
  if (props.onDestory) { props.onDestory() }
}

// 表格Ref对象
const tableRef = ref(null)
// 表格配置
const tableAttrs = reactive({
  data: props.modelState,
  keyField: 'id',
  boxConfig: { mode: 'checkbox', fixed: true },
  pagerConfig: false,
  toolbarConfig: { refresh: false },
  sortable: false,
})
// 表格列
const tableColumns = reactive([
  { field: 'name', title: '状态名称', width: 160, sortable: false, slots: { default: 'input' } },
  { field: 'field', title: '绑定字段', width: 160, sortable: false, slots: { default: 'select_filed' } },
  { field: 'icon', title: '图标', width: 200, sortable: false, slots: { default: 'input_icon' } },
  { field: 'iconColor', title: '图标颜色', width: 150, sortable: false, slots: { default: 'input_color' } },
  { field: 'textColor', title: '文字颜色', width: 150, sortable: false, slots: { default: 'input_color' } },
  { field: 'valueColor', title: '数字颜色', width: 150, ortable: false, slots: { default: 'input_color' } },
  { field: 'path', title: '跳转路径', width: 200, sortable: false, slots: { default: 'select_routes' } },
  { field: 'option', title: '路径参数', width: 80, align: 'center', sortable: false, slots: { default: 'parameter' } },
])
// 字段下拉选项
const fieldOptions = computed(() => {
  const { schema, pData } = props
  return loadDataChildCols(schema.id, pData.type)
})
/**
 * 新增行
 */
const addTableRow = () => {
  tableRef.value.insertAt({
    id: getUUID(),
    name: '',
    field: '',
    path: '',
    routeQuery: '',
    routeState: '',
  }, null)
}
/**
 * 删除行
 */
const delTableRow = () => {
  const checkRecords = tableRef.value.getCheckboxRecords()
  if (!checkRecords.length) return
  tableRef.value.removeCheckboxRow()
}


const parameterDialogRef = ref()
/**
 * 打开路径参数对话框
 * @function openDbViewDialog
 */
const handleParameter = (row) => {
  parameterDialogRef.value.handleOpen(row)
}

const parameterConfirm = (value, id) => {
  // 找到需要更新的行
  const { tableData } = tableRef.value.getTableData()
  const index = tableData.findIndex(item => item.id == id);
  if (index !== -1) {
    // 修改数据
    tableData[index]['routeQuery'] = value.routeQuery;
    tableData[index]['routeState'] = value.routeState;
  }
}

</script>

<style lang="scss" scoped>
.series-dialog-body {
	height: 100%;
}
</style>